/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  UploadOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Col,
  Row,
  DatePicker,
  Input,
  Select,
  Tooltip,
  message,
  InputNumber,
  Modal,
  AutoComplete,
  Switch,
} from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import downloadFile from '@/utils/utils';
import StandardTable from '@/components/StandardTable';
import Authorized from '@/utils/Authorized';
import styles from './style.less';
import BatchUpload from './BatchUpload';
import HOCSelect from '@/components/AntDesign/Select';

const { confirm } = Modal;
const { Option } = Select;
const { TextArea, Search } = Input;
const FormItem = Form.Item;
const { MonthPicker } = DatePicker;

@Form.create()
@connect(({ oncechargens }) => ({
  formFieldsValue: oncechargens.formFieldsValue,
  expandForm: oncechargens.expandForm,
  pageData: oncechargens.pageData,
  custDataList: oncechargens.custDataList,
  oncechargens,
  empNameList: oncechargens.empNameList,
  onceFeeChrgDrafId: oncechargens.onceFeeChrgDrafId,
}))
class AdvancedForm extends PureComponent {
  state = {
    chargeflg: false, // 控制有没有收费年月
    isTableShow: true, // 控制是否有员工明细
    ONCE_FEE_WAY: [], // 收费方式下拉
    product: [], // 产品下拉
    custList: [], // 客户列表
    tableBlock: true, // 显不显示列表
    chargeType: null, // 收费方式
    modalVisible: false, // 新增雇员明细的弹框显隐
    productData: {},
    nowPage: 1,
    pageNum: 10,
    isHaveAmount: true, // 是否有个人金额，企业金额
    selectPdId: null,
    custId: null,
    idType: 1,
  };

  componentDidMount() {
    const { dispatch, params } = this.props;
    dispatch({
      type: 'oncechargens/updateModelData',
      payload: {
        onceFeeChrgDrafId: null,
      },
    });
    // 获取字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['ONCE_FEE_WAY', 'ADD_ID_TYPE'],
      callback: res => {
        this.setState({
          ONCE_FEE_WAY: res.ONCE_FEE_WAY,
        });
      },
    });
    // 获取产品下拉
    dispatch({
      type: 'oncechargens/getProductList',
      payload: {},
    }).then(res => {
      if (res.success) {
        this.setState({
          product: res.data,
        });
      } else {
        this.setState({
          product: [],
        });
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
    // 获取签约方下拉
    dispatch({
      type: 'oncechargens/getSuppList',
      payload: { type: 4, status: 2, name: null, ...params },
    }).then(res => {
      if (res.success) {
        this.setState({
          supplyList: res.data,
        });
      } else {
        this.setState({ supplyList: [] });
        message.warning(`${res.message}`);
      }
    });
  }

  // 选择供应商，清空客户
  getsuppid = () => {
    const { form } = this.props;
    form.resetFields(['custId']);
  };

  // 获取列表
  getList = (Page, pageNum, onceFeeChrgDrafId) => {
    const { dispatch } = this.props;
    const pageArg = {
      currentPage: Page,
      pageSize: pageNum,
    };
    const pladta = {
      pageArg,
      onceFeeChrgDrafId,
    };
    dispatch({
      type: 'oncechargens/getListData',
      payload: pladta,
    });
  };

  // 客户名称
  getData = value => {
    const { dispatch } = this.props;
    this.setState({ custId: value });
    dispatch({
      type: 'oncechargens/updateModelData',
      payload: { empNameList: [] },
    });
  };

  // 姓名模糊查询
  searchEmpName = value => {
    const { dispatch } = this.props;
    const { custId } = this.state;
    if (value.trim().length) {
      dispatch({
        type: 'oncechargens/fetchEmpNameList',
        payload: {
          empName: value,
          custId,
        },
      });
    }
  };

  // 选择姓名
  selectEmpName = value => {
    const { empNameList, form } = this.props;
    empNameList.map(item => {
      if (item.empId === value.key) {
        form.setFieldsValue({ idnoNumber: item.idCode });
        this.setState({ idType: item.idType });
      }
    });
  };

  // 输入证件号查询名字
  searchIdCode = value => {
    const { dispatch, form } = this.props;
    const { custId } = this.state;
    form.resetFields(['moName']);
    dispatch({
      type: 'oncechargens/fetchEmpNameList',
      payload: {
        idCode: value,
        custId,
      },
    }).then(data => {
      if (data.length) {
        data.map(item => {
          if (item.idCode === value) {
            form.setFieldsValue({ moName: { key: item.empId, label: item.empName } });
            this.setState({ idType: item.idType });
          }
        });
      }
    });
  };

  // 取消
  cancel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'oncechargens/updateModalData',
      payload: {
        formFieldsValue: {},
        expandForm: false,
        pageData: {
          pagination: {
            current: 1,
            pageSize: 10,
            total: 10,
          },
        },
      },
    });
    router.push('/chargmanage/oncechargens/index');
  };

  // 表单检测 并 提交
  submitAll = () => {
    let submitData = {};
    const { dispatch, custDataList, form, onceFeeChrgDrafId } = this.props;
    const { chargeType } = this.state;
    const getFieldsList = form.getFieldsValue();
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo', 'feeDay']
        : ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo'],
      (err, values) => {
        if (!err) {
          const feeService = values.feeService.format('YYYYMM');
          submitData = {
            onceFeeChrgDrafId,
            busiYm: feeService,
            pdId: values.pdName,
            remark: getFieldsList.remark,
            feeAmo: values.feeAmo,
            feeWay: values.feeType,
            custId: values.custId,
            custContId: getFieldsList.businessCon,
            ordSndrId: values.ordSndrId,
          };
          if (values.feeDay) {
            const feeDay = values.feeDay.format('YYYYMM');
            submitData.feeYm = feeDay;
          }
          if (Number(values.feeAmo) === 0) {
            message.warning('收费总金额不能为 0 ');
            return;
          }
          if (custDataList.length === 0) {
            message.warning('请填写员工明细！！');
          } else {
            dispatch({
              type: 'oncechargens/addOnceData',
              payload: submitData,
            }).then(res => {
              if (res.success) {
                message.success('新增成功！');
                dispatch({
                  type: 'oncechargens/updateModalData',
                  payload: {
                    formFieldsValue: {},
                    expandForm: false,
                    pageData: {
                      pagination: {
                        current: 1,
                        pageSize: 10,
                        total: 10,
                      },
                    },
                  },
                });
                router.push('/chargmanage/oncechargens/index');
              } else {
                message.warning(res.message || '新增失败！');
              }
            });
          }
        }
      }
    );
  };

  // 点击上传
  uploadFile = () => {
    const { form, dispatch, onceFeeChrgDrafId } = this.props;
    const { chargeType, selectPdId } = this.state;
    const getFieldsList = form.getFieldsValue();
    let errorInfo = false;
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo', 'feeDay']
        : ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo'],
      err => {
        errorInfo = !err;
        if (!err) {
          this.setState({
            tableBlock: false,
          });
          let feeYm = null;
          if (+chargeType === 2) {
            feeYm = getFieldsList.feeDay ? getFieldsList.feeDay.format('YYYYMM') : null;
          }
          dispatch({
            type: 'oncechargens/updateModelData',
            payload: {
              batchQuery: {
                onceFeeChrgDrafId: onceFeeChrgDrafId == null ? '空' : onceFeeChrgDrafId,
                pdId: getFieldsList.pdName ? getFieldsList.pdName : null,
                feeWay: getFieldsList.feeType ? getFieldsList.feeType : null,
                custId: getFieldsList.custId ? getFieldsList.custId : null,
                ordSndrId: getFieldsList.ordSndrId ? getFieldsList.ordSndrId : null,
                busiYm: getFieldsList.feeService ? getFieldsList.feeService.format('YYYYMM') : null,
                feeYm,
              },
            },
          });
          dispatch({
            type: 'oncechargens/getDownloadInfo',
            payload: {
              pdId: selectPdId,
            },
          });
        }
      }
    );
    return errorInfo;
  };

  // 点击新增
  Updownadd = () => {
    const { form, onceFeeChrgDrafId } = this.props;
    const { chargeType } = this.state;
    const getFieldsList = form.getFieldsValue();
    const product = {
      pdId: getFieldsList.pdName,
      feeWay: getFieldsList.feeType,
      custId: getFieldsList.custId,
      ordSndrId: getFieldsList.ordSndrId,
      custContId: getFieldsList.businessCon,
      onceFeeChrgDrafId,
      busiYm: getFieldsList.feeService && getFieldsList.feeService.format('YYYYMM'),
    };
    if (+chargeType === 2) {
      product.feeYm = getFieldsList.feeDay ? getFieldsList.feeDay.format('YYYYMM') : null;
    }
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo', 'feeDay']
        : ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo'],
      err => {
        if (!err) {
          this.setState({
            productData: product,
          });
          this.handleModalVisible(true);
        }
      }
    );
  };

  // 切换模态框：新增
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // 取消关闭模态框
  cancelModal = () => {
    this.handleModalVisible(false, true);
  };

  // 新增修改提交数据
  submitData = () => {
    const { form, dispatch, onceFeeChrgDrafId } = this.props;
    const { productData, isHaveAmount, idType } = this.state;
    const getFieldsList = form.getFieldsValue();
    form.validateFieldsAndScroll(err => {
      if (!err) {
        const submitData = {
          feeYm: productData.feeYm ? productData.feeYm : null,
          pdId: productData.pdId,
          ordSndrId: productData.ordSndrId,
          feeWay: productData.feeWay,
          custId: productData.custId,
          custContId: productData.custContId,
          onceFeeChrgDrafId,
          busiYm: productData.busiYm,
          onceFeeChrgDet: {
            empName: getFieldsList.moName && getFieldsList.moName.label,
            idType,
            idNo: getFieldsList.idnoNumber,
            perAmo: getFieldsList.moperAmuout, //   个人金额 perAmo
            comAmo: getFieldsList.entAmount, // 企业金额 comAmo
            fee: getFieldsList.moService, // 服务费 fee
            remark: getFieldsList.remarkTwo,
          },
        };
        if (isHaveAmount) {
          if (!getFieldsList.moperAmuout && !getFieldsList.entAmount && !getFieldsList.moService) {
            message.warning('个人金额、企业金额和服务费必须填写一项 ');
            return;
          }
        } else if (!getFieldsList.moService) {
          return;
        }
        dispatch({
          type: 'oncechargens/modalSubmitData',
          payload: submitData,
        }).then(res => {
          if (res.success) {
            this.handleModalVisible(false);
            this.getList(1, 10, res.data.onceFeeChrgDrafId);
            dispatch({
              type: 'oncechargens/updateModelData',
              payload: {
                onceFeeChrgDrafId: res.data && res.data.onceFeeChrgDrafId,
              },
            });
          } else {
            message.warning(res.message || '新增失败');
          }
        });
      }
    });
  };

  // 点击关闭
  Close = () => {
    this.setState({
      tableBlock: true,
    });
  };

  // 下载模板
  downtemplte = () => {
    const { dispatch } = this.props;
    const { selectPdId } = this.state;
    dispatch({
      type: 'oncechargens/download',
      payload: {
        pdId: selectPdId,
      },
    }).then(res => {
      const fileInfo = res.data.split('|');
      downloadFile({ fileId: fileInfo[0], fileName: fileInfo[1] });
    });
  };

  // 通过签约方获取客户名称
  getCustnameList = e => {
    const { supplyList } = this.state;
    const { dispatch } = this.props;
    supplyList.map(item => {
      if (String(item.suppId) === String(e)) {
        dispatch({
          type: 'oncechargens/getcustList',
          payload: { suppId: item.suppId },
        }).then(res => {
          if (res.success) {
            this.setState({
              custList: res.data,
            });
          } else {
            this.setState({
              custList: [],
            });
            message.warning(res.message || '获取客户列表：服务端错误');
          }
        });
      }
    });
  };

  // 点击完成
  complete = () => {
    const { dispatch, onceFeeChrgDrafId } = this.props;
    const { nowPage, pageNum } = this.state;
    this.setState({
      tableBlock: true,
    });
    dispatch({
      type: 'oncechargens/updateModelData',
      payload: { currentStep: 0 },
    });
    this.getList(nowPage, pageNum, onceFeeChrgDrafId);
  };

  // 删除某个员工明细
  deleteDeta = record => {
    const { dispatch, onceFeeChrgDrafId } = this.props;
    const that = this;
    confirm({
      icon: <QuestionCircleOutlined />,
      title: '你确定要删除此条数据吗？',
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk() {
        dispatch({
          type: 'oncechargens/deleteRecord',
          payload: { onceFeeChrgDetDrafId: record.onceFeeChrgDetDrafId },
        }).then(res => {
          if (res.success) {
            const { nowPage, pageNum } = that.state;
            that.getList(nowPage, pageNum, onceFeeChrgDrafId);
            that.setState({ nowPage });
            message.success(`${res.message || '删除成功！'}`);
          } else {
            message.warning(`${res.message || res.data || '删除失败！'}`);
          }
        });
      },
      onCancel() {
        that.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { onceFeeChrgDrafId } = this.props;
    this.getList(pagination.current, pagination.pageSize, onceFeeChrgDrafId);
  };

  // 选择收费方式
  changeCharge = e => {
    if (+e === 1) {
      this.setState({
        chargeflg: false,
        chargeType: e,
      });
    } else if (+e === 2) {
      this.setState({
        chargeflg: true,
        chargeType: e,
      });
    }
  };

  // 选择产品
  changePdName = value => {
    this.setState({ selectPdId: value });
    // 社保 公积金 代发工资 代报税维护个人金额，企业金额
    if (
      value === 'PDINF_0000000001' ||
      value === 'PDINF_0000000002' ||
      value === 'PDINF_0000000004' ||
      value === 'PDINF_0000000005'
    ) {
      this.setState({ isHaveAmount: true });
    } else {
      this.setState({ isHaveAmount: false });
    }
  };

  // 选择开关
  changeSwitch = checked => {
    // const { nowPage, pageNum, onceFeeChrgDrafId } = this.state;
    this.setState({
      isTableShow: checked,
    });
    // if (checked === true) {
    //   this.getList(nowPage, pageNum, onceFeeChrgDrafId);
    // }
  };

  // 渲染函数
  render() {
    const {
      chargeflg,
      tableBlock,
      ONCE_FEE_WAY,
      product,
      custList,
      modalVisible,
      supplyList,
      isHaveAmount,
      isTableShow,
    } = this.state;
    const {
      loading,
      form,
      submitting,
      custDataList,
      empNameList = [],
      onceFeeChrgDrafId,
    } = this.props;
    const { getFieldDecorator } = form;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        width: 240,
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        width: 240,
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收费金额',
        dataIndex: 'feeAmo',
        width: 240,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => <span>{(val && val.toFixed(2)) || '--'}</span>,
      },
      {
        title: (isHaveAmount && '个人金额') || null,
        dataIndex: (isHaveAmount && 'perAmo') || null,
        width: (isHaveAmount && 240) || null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (isHaveAmount && <span>{(val && val.toFixed(2)) || '--'}</span>) || null,
      },
      {
        title: (isHaveAmount && '企业金额') || null,
        dataIndex: (isHaveAmount && 'comAmo') || null,
        width: (isHaveAmount && 240) || null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (isHaveAmount && <span>{(val && val.toFixed(2)) || '--'}</span>) || null,
      },
      {
        title: '服务费',
        dataIndex: 'fee',
        width: 240,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => <span>{(val && val.toFixed(2)) || '--'}</span>,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: 240,
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 240,
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (
          <span>
            <div>
              <a key="delete" onClick={() => this.deleteDeta(record)}>
                删除
              </a>
            </div>
          </span>
        ),
      },
    ];
    // 模态框配置
    const modalConfig = {
      title: '新增员工',
      visible: modalVisible,
      onOk: this.submitData,
      okText: '提交',
      onCancel: this.cancelModal,
      confirmLoading: loading,
      destroyOnClose: true,
    };
    const formItemLayout = {
      labelCol: { md: { span: 6 } },
      wrapperCol: { md: { span: 15 } },
    };

    return (
      <Form layout="vertical">
        <PageHeaderWrapper wrapperClassName={styles.advancedForm}>
          <Card title="基本信息">
            <Row gutter={64}>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem label="产品">
                  {getFieldDecorator('pdName', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Select
                      placeholder="请选择"
                      disabled={onceFeeChrgDrafId != null}
                      onSelect={this.changePdName}
                    >
                      {product.map(item => (
                        <Option key={item.pdCode} value={item.pdCode}>
                          {item.pdName}
                        </Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem
                  label={
                    <Tooltip
                      placement="right"
                      title="单独收费指不进入收费账单，可直接做到款认领或财务收费；合并账单收费则是进入账单一起向客户收费。"
                    >
                      <span>收费方式</span>
                      <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                    </Tooltip>
                  }
                >
                  {getFieldDecorator('feeType', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Select
                      placeholder="请选择"
                      onChange={this.changeCharge}
                      disabled={onceFeeChrgDrafId != null}
                    >
                      {ONCE_FEE_WAY.map(item => (
                        <Option key={item.itemCode} value={item.itemCode}>
                          {item.itemName}
                        </Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem label="签约方">
                  {getFieldDecorator('ordSndrId', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <HOCSelect
                      placeholder="请输入关键字检索"
                      showSearch
                      optionFilterProp="children"
                      disabled={onceFeeChrgDrafId != null}
                      notFoundContent="暂无数据"
                      onSelect={(value, item) => this.getCustnameList(value, item)}
                      onChange={this.getsuppid}
                    >
                      {supplyList &&
                        supplyList.map(item => (
                          <Option key={item.suppId} title={item.name}>
                            {item.name}
                          </Option>
                        ))}
                    </HOCSelect>
                  )}
                </FormItem>
              </Col>
              <div style={{ clear: 'both' }} />
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="客户名称">
                  {getFieldDecorator('custId', {
                    rules: [{ required: true, message: '请输入' }],
                  })(
                    <Select
                      placeholder="请选择"
                      showSearch
                      disabled={onceFeeChrgDrafId != null}
                      optionFilterProp="children"
                      onSelect={this.getData}
                    >
                      {custList.map(one => (
                        <Option
                          key={one.custId}
                          value={one.custId}
                          title={one.no ? `${one.name}（${one.no}）` : one.name}
                        >
                          {one.no ? `${one.name}（${one.no}）` : one.name}
                        </Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem label="业务年月">
                  {getFieldDecorator('feeService', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <MonthPicker placeholder="请选择" format="YYYY-MM" style={{ width: '100%' }} />
                  )}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="收费总金额">
                  {getFieldDecorator('feeAmo', {
                    rules: [
                      {
                        required: true,
                        message: '请输入小数点不超过2位的数字',
                        pattern: /^-?\d+\.?\d{0,2}$/,
                      },
                    ],
                  })(
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      min={0}
                      max={9999999.99}
                    />
                  )}
                </FormItem>
              </Col>
              {chargeflg ? (
                <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                  <FormItem label="收费年月">
                    {getFieldDecorator('feeDay', {
                      rules: [{ required: true, message: '请选择' }],
                    })(
                      <MonthPicker
                        disabled={onceFeeChrgDrafId != null}
                        format="YYYY-MM"
                        style={{ width: '100%' }}
                        disabledDate={current => current < moment().subtract(1, 'months')}
                      />
                    )}
                  </FormItem>
                </Col>
              ) : null}
            </Row>
            <Row gutter={64}>
              <Col xl={{ span: 24 }} lg={24} md={24} sm={24}>
                <FormItem label="备注">
                  {getFieldDecorator('remark', {
                    rules: [{ required: false, message: '请输入' }],
                  })(<TextArea rows={4} maxLength={200} />)}
                </FormItem>
              </Col>
            </Row>
          </Card>
          <Card
            title={
              <p style={{ marginBottom: 0 }}>
                是否有员工明细
                <Switch
                  style={{ marginLeft: 16 }}
                  checkedChildren="有"
                  defaultChecked
                  unCheckedChildren="无"
                  onChange={this.changeSwitch}
                />
              </p>
            }
          >
            {isTableShow ? (
              <div>
                <Authorized authority="ns:onceChrg:insertEmp" noMatch={null}>
                  <Button type="primary" style={{ marginRight: '20px' }} onClick={this.uploadFile}>
                    <UploadOutlined />
                    上传
                  </Button>
                </Authorized>
                <Authorized authority="ns:onceChrg:insertEmp" noMatch={null}>
                  <Button onClick={this.Updownadd}>
                    <PlusOutlined />
                    新增
                  </Button>
                </Authorized>
                {tableBlock === true ? (
                  <StandardTable
                    selectedRows={[]}
                    selectedRowKeys={[]}
                    loading={loading}
                    data={custDataList}
                    rowKey="key"
                    columns={columns}
                    onChange={this.handleStandardTableChange}
                    style={{ marginTop: '16px' }}
                  />
                ) : (
                  <BatchUpload
                    closeUpload={() => {
                      this.setState({
                        tableBlock: true,
                      });
                    }}
                    finishClick={this.complete}
                    custOrSupp={1}
                    checkFormSubmit={() => this.uploadFile()}
                  />
                )}
              </div>
            ) : null}
          </Card>
          <FooterToolbar style={{ width: '100% ' }}>
            <Button onClick={this.cancel} style={{ marginRight: 10 }}>
              取消
            </Button>
            <Button type="primary" onClick={this.submitAll} loading={submitting}>
              提交
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
        <Modal {...modalConfig}>
          <Form layout="horizontal">
            <FormItem {...formItemLayout} label="姓名">
              {getFieldDecorator('moName', {
                rules: [{ required: true, message: '请输入' }],
              })(
                <HOCSelect
                  placeholder="请输入关键字检索"
                  showSearch
                  showArrow={false}
                  filterOption={false}
                  onSearch={this.searchEmpName}
                  onSelect={this.selectEmpName}
                  labelInValue
                >
                  {empNameList.length &&
                    empNameList.map(item => <Option key={item.empId}>{item.empName}</Option>)}
                </HOCSelect>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="证件号">
              {getFieldDecorator('idnoNumber', {
                rules: [{ required: true, message: '请输入' }],
              })(
                <AutoComplete>
                  <Search
                    placeholder="请输入关键字检索"
                    onSearch={value => this.searchIdCode(value)}
                  />
                </AutoComplete>
              )}
            </FormItem>
            {isHaveAmount ? (
              <FormItem {...formItemLayout} label="个人金额">
                {getFieldDecorator('moperAmuout', {
                  rules: [
                    {
                      required: false,
                      message: '请输入小数点不超过2位的数字',
                      pattern: /^-?\d+\.?\d{0,2}$/,
                    },
                  ],
                })(
                  <InputNumber
                    style={{ width: '100%' }}
                    placeholder="请输入"
                    min={0}
                    max={9999999.99}
                  />
                )}
              </FormItem>
            ) : null}
            {isHaveAmount ? (
              <FormItem {...formItemLayout} label="企业金额">
                {getFieldDecorator('entAmount', {
                  rules: [
                    {
                      required: false,
                      message: '请输入小数点不超过2位的数字',
                      pattern: /^-?\d+\.?\d{0,2}$/,
                    },
                  ],
                })(
                  <InputNumber
                    style={{ width: '100%' }}
                    placeholder="请输入"
                    min={0}
                    max={9999999.99}
                  />
                )}
              </FormItem>
            ) : null}

            <FormItem {...formItemLayout} label="服务费">
              {getFieldDecorator('moService', {
                rules: [{ required: !isHaveAmount, message: '请输入' }],
              })(
                <InputNumber
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  min={0}
                  max={9999999.99}
                  precision={2}
                />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="备注">
              {getFieldDecorator('remarkTwo', {
                rules: [{ required: false, message: '请输入' }],
              })(<Input placeholder="请输入" maxLength={200} />)}
            </FormItem>
            {isHaveAmount ? (
              <FormItem
                className={styles.markStyle}
                {...formItemLayout}
                label={<span style={{ color: '#ccc' }}>注</span>}
              >
                <span style={{ color: '#ccc' }}>个人金额、企业金额和服务费必须填写一项</span>
              </FormItem>
            ) : null}
          </Form>
        </Modal>
      </Form>
    );
  }
}
export default AdvancedForm;
